<template>
	<view class="page_view" v-if="info">
		<view class="w-1 grent"></view>
		<view class="head_flex">
			<view class="head_flex_left">
				<image :src="info.avatar" class="head_flex_img" mode=""></image>
				<view class="head_flex_left_right">
					<view class="head_flex_left_right_top">
						{{info.nickname}}
					</view>
					<view class="head_flex_left_right_bottom">
						{{info.invitation_code}}<text class="head_flex_left_right_bottom_fuzhi" @tap="fuzhi">复制</text>
					</view>
				</view>
			</view>
			<view class="head_flex_right" @tap="yaoqing">
				<view class="head_flex_right_text">
					立即邀请
				</view>
			</view>
		</view>
		<view class="content-view">
			<view class="card">
				<view class="crad_top">
					<view class="crad_top_item">
						<view class="crad_top_item-top">
							累计奖励(元)
						</view>
						<view class="crad_top_item-bottom">
							{{introduce.accumulative_total}}
						</view>
					</view>
					<view class="crad_top_item">
						<view class="crad_top_item-top">
							待入账(元)
						</view>
						<view class="crad_top_item-bottom">
							{{introduce.stay}}
						</view>
					</view>
					<view class="crad_top_item">
						<view class="crad_top_item-top">
							邀请人数
						</view>
						<view class="crad_top_item-bottom">
							{{introduce.invite_number}}
						</view>
					</view>
				</view>
				<view class="card_min">
					<view class="card_min-item">
						<view class="card_min-item-top">
							提现中
						</view>
						<view class="card_min-item-bottom">
							￥<text class="card_min-item-bottom_num">{{introduce.withdrawing}}</text>
						</view>
					</view>
					<view class="card_min-item">
						<view class="card_min-item-top">
							已提现
						</view>
						<view class="card_min-item-bottom">
							￥<text class="card_min-item-bottom_num">{{introduce.withdrawed}}</text>
						</view>
					</view>
					<view class="card_min-item">
						<view class="card_min-item-top">
							可提现
						</view>
						<view class="card_min-item-bottom">
							￥<text class="card_min-item-bottom_num">{{introduce.may_withdraw}}</text>
						</view>
					</view>
				</view>
				<view class="card_bottom">
					<view class="card_bottom-item card_bottom-item-left" @tap="jilu">
						提现记录
					</view>
					<view class="card_bottom-item card_bottom-item-right" @tap="tixian">
						<image src="/static/images/home/hongbao.png" class="hongbao" mode="" @tap.stop="hongbao"></image>
						立即提现
					</view>
				</view>
			</view>
			<view class="list">
				<view class="list-item" @tap="yaoqing">
					<view class="list-item-left">
						<image src="/static/images/home/yaoqing.png" class="list-item-left-img" mode=""></image>
						<view class="list-item-left-text">
							邀请分享
						</view>
					</view>
					<u-icon name="arrow-right" class="arrow-right"></u-icon>
				</view>
				<view class="list-item" @tap="go_huoban">
					<view class="list-item-left">
						<image src="/static/images/home/huoban.png" class="list-item-left-img" mode=""></image>
						<view class="list-item-left-text">
							我的伙伴
						</view>
					</view>
					<view class="list-item-left">
						<view class="arrow-right_num">
							{{introduce.partner_number}}人
						</view>
						<u-icon name="arrow-right" class="arrow-right"></u-icon>
					</view>
					
				</view>
				<view class="list-item" @click="clickRight">
					<view class="list-item-left">
						<image src="/static/images/home/guize.png" class="list-item-left-img" mode=""></image>
						<view class="list-item-left-text">
							规则说明
						</view>
					</view>
					<u-icon name="arrow-right" class="arrow-right"></u-icon>
				</view>
			</view>
		</view>
		<!-- 邀请规则 -->
		<u-popup bgColor="transparent" border-radius="32" v-model="show" mode="center">
			<view class="fl-b-c relative"
				style="padding: 64rpx 0rpx 0rpx 0rpx; width: 624rpx; height: 974rpx; background: #FFFFFF; border-radius: 32rpx;">
				<text class="bold fs-42" style="color: #000000;">邀请规则</text>
				<image @click="show = false" src="/static/images/user/close_pup.png" style="position: absolute; right: 36rpx; top: 36rpx; width: 29rpx; height: 29rpx;"></image>
				<scroll-view scroll-y class="w-1"
					style="height: 700rpx; margin-top: 48rpx; padding: 0 36rpx 50rpx 36rpx;">
					<u-parse class="w-1 fs-26" :html="introduce.rule"></u-parse>
				</scroll-view>
				<view class="w-1 fr-b-c">
					<view class="fr-c argee-btn w-1" @click="readed">
						<text>已阅读</text>
						<view class="fr-s-c m-l-20" v-if="countShow">
		    <u-count-to :start-val="10" :end-val="0" :duration="10000" :use-easing="false" color="#ffffff" font-size="32" @end="countShow = false"></u-count-to>s
						</view>
					</view>
				</view> 
			</view>
		</u-popup>
		<u-popup v-model="yaoqing_tc_show" mode="bottom">
			<view class="yaoqing_tc">
				<view class="yaoqing_tc-item-view" @tap="fenxianglianjie">
					<image src="/static/images/home/Group1410@2x.png" class="yaoqing_tc-item" mode=""></image>
					<view class="yaoqing_tc-item-view-text">
						分享链接
					</view>
				</view>
				<view class="yaoqing_tc-item-view" @tap="yaoqingma">
					<image src="/static/images/home/Group1409@2x.png" class="yaoqing_tc-item" mode=""></image>
					<view class="yaoqing_tc-item-view-text">
						复制邀请码
					</view>
				</view>
			</view>		
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show:false,
				countShow:true,
				content:'',
				yaoqing_tc_show:false,
				info:'',
				introduce:{
					accumulative_total:0,
					stay:0,
					invite_number:0,
					withdrawing:0,
					withdrawed:0,
					may_withdraw:0,
					partner_number:0,
					rule:'邀请规则'
				}
			}
		},
		onLoad() {
			this.getinfo()
			// this.getRule()
		},
		methods: {
			getinfo(){
				let t = this
				t.$get({
					url: '/wanlshop/user/myIntroduce',
				}).then(res => {
					console.log(res)
					if(res.code == 1){
						t.info = res.data
						if(t.info.introduce){
							t.introduce = t.info.introduce
						}
					}
				})
			},
			go_huoban(){
				uni.navigateTo({
					url:'/pages/UserCenter/huoban/huoban'
				})
			},
			readed(){
				if(!this.countShow){
					this.show = false
				}
			},
			clickRight(){
				this.countShow=true
				this.show = true
			},
			// 邀请规则
			getRule(){
				this.$get({
					url:'/appuser/content'
				}).then(res=>{
					this.content = res.data[0].invitation_rules
				})
			},
			jilu(){
				uni.navigateTo({
					url:'/pages/UserCenter/txjl/txjl'
				})
			},
			goback(){
				uni.navigateBack()
			},
			tixian(){
				uni.navigateTo({
					url:'/pages/UserCenter/RecommendationCenter/CommissionWithdrawal/CommissionWithdrawal?may_withdraw='+this.introduce.may_withdraw +'&type=2'
				})
			},
			hongbao(){
				console.log('+++')
			},
			yaoqingma(){
				let t = this
				uni.setClipboardData({
					data: t.info.invitation_code,
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				});
			},
			fuzhi(){
				let t = this
				uni.setClipboardData({
					data: t.info.invitation_code,
					success: function () {
						uni.showToast({
							title:'复制成功',
							icon:'none'
						})
					}
				});
			},
			fenxianglianjie(){
				uni.share({
					provider: "weixin",
					scene: "WXSceneSession",
					type: 1,
					href: "https://donghuomu.jiuhuanmall.com/h5/#/",
					title: "东火木",
					// 东火木，赶紧跟我一起来体验
					summary: "东火木app,快和我一起来体验吧！",
					success: function (res) {
						console.log("success:" + JSON.stringify(res));
					},
					fail: function (err) {
						console.log("fail:" + JSON.stringify(err));
					}
				});
			},
			yaoqing(){
				this.yaoqing_tc_show = true
				
			}
		}
	}
</script>

<style scoped>
.grent {
		position: fixed;
		left: 0;
		top: 0;
		width: 100vw;
		height: 812rpx;
		background: linear-gradient(180deg, #E56C30 22%, rgba(229,108,48,0) 100%);
	}
	.mynav{
		background: linear-gradient(180deg, #E56C30 22%, rgba(229,108,48,0) 100%);
		background-size: 100vh,520rpx;
		position: fixed;
		left: 0;
		top: 0;
		z-index: 99;
		overflow: hidden;
	}
	.nav_left{
		width: 33%;
	}
	.nav_right{
		width: 33%;
	}
	.arrow-leftward{
		width: 48rpx;
		height: 48rpx;
		font-size: 38rpx;
		color: #fff;
	}
	.head_flex{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding:0 32rpx ;
		padding-top: 55rpx;
		position: relative;
		z-index: 99;
	}
	.head_flex_img{
		width: 96rpx;
		height: 96rpx;
		border-radius: 50%;
		background-color: black;
	}
	.head_flex_left{
		display: flex;
		align-items: center;
	}
	.head_flex_left_right{
		margin-left:28rpx ;
	}
	.head_flex_left_right_top{
		font-size: 40rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #FFFFFF;
	}
	.head_flex_left_right_bottom{
		font-size: 26rpx;
		font-family: Segoe UI-Regular, Segoe UI;
		font-weight: 400;
		color: rgba(255,255,255,0.8);
		line-height: 30rpx;
		letter-spacing: 4px;
	}
	.head_flex_left_right_bottom_fuzhi{
		background: rgba(255,255,255,0.3);
		letter-spacing: 0px;
		padding: 5rpx 12rpx;
		font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
		font-weight: 400;
		color: rgba(255,255,255,0.8);
	}
	.head_flex_right{
		width: 138rpx;
		height: 62rpx;
		background: linear-gradient(90deg, #FFF0D8 0%, #F8BE5F 100%);
		box-shadow: 0rpx 0rpx 24rpx 0rpx rgba(0,0,0,0.1);
		border-radius: 31rpx ;
		line-height: 62rpx;
		text-align: center;
	}
	.head_flex_right_text{
		font-size: 22rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		background: linear-gradient(270deg, #E46C30 0%, #E32C1C 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.content-view{
		width:100%;
		padding: 0 32rpx;
		box-sizing: border-box;
		position: relative;
		z-index: 99;
	}
	.card{
		width: 100%;
		height: 466rpx;
		border-radius: 16rpx;
		background-color: #fff;
		margin-top: 52rpx;
		
	}
	.crad_top{
		width: 100%;
		height: 170rpx;
		background: linear-gradient(135deg, #FDFCDC 0%, #EECD97 72%);
		border-radius: 16rpx 16rpx 0rpx 0rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 54rpx;
	}
	.crad_top_item{
		text-align: center;
	}
	.crad_top_item-top{
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
		font-weight: 400;
		color: #942F2F;
	}
	.crad_top_item-bottom{
		font-size: 40rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #872626;
		margin-top: 10rpx;
	}
	.card_min{
		width: 100%;
		height: 150rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 54rpx;
	}
	.card_min-item-top{
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
		font-weight: 400;
		color: #666666;
	}
	.card_min-item-bottom{
		font-size: 24rpx;
		font-family: Alibaba PuHuiTi 2.0-65 Medium, Alibaba PuHuiTi 20;
		font-weight: normal;
		color: #000000;
		margin-top: 16rpx;
	}
	.card_min-item-bottom_num{
		font-size: 36rpx;
	}
	.card_bottom{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 0 54rpx;
		margin-top: 25rpx;
		
	}
	.card_bottom-item{
		width: 274rpx;
		height: 82rpx;
		border-radius: 41rpx 41rpx 41rpx 41rpx;
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
		font-weight: 400;
		line-height: 82rpx;
		text-align: center;
	}
	.card_bottom-item-left{
		border: 2rpx solid #E46C30;
		background: linear-gradient(180deg, #E46C30 0%, #E32C1C 100%);
		-webkit-background-clip: text;
		-webkit-text-fill-color: transparent;
	}
	.card_bottom-item-right{
		background: linear-gradient(180deg, #E46C30 0%, #E32C1C 100%);
		color: #FFFFFF;
		position: relative;
	}
	.hongbao{
		width: 86rpx;
		height: 94rpx;
		position: absolute;
		top: -94rpx;
	}
	.list{
		width: 686rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 0rpx 32rpx 0rpx rgba(0,0,0,0.08);
		border-radius: 16rpx;
		padding: 20rpx 32rpx;
		box-sizing: border-box;
		margin-top: 28rpx;
	}
	.list-item:last-child{
		border-bottom: #F4F4F4 solid 0rpx;
	}
	.list-item{
		width: 100%;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		border-bottom: #F4F4F4 solid 2rpx;
	}
	.list-item-left{
		display: flex;
		align-items: center;
	}
	.list-item-left-img{
		width: 42rpx;
		height: 42rpx;
		margin-right: 20rpx;
	}
	.arrow-right{
		font-size: 26rpx;
	}
	.arrow-right_num{
		font-size: 28rpx;
		font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
		font-weight: 400;
		color: #999999;
	}
	.argee-btn{
		height: 100rpx;
		background: #FA360A;
		border-radius: 0rpx 0rpx 32rpx 32rpx;
		font-size: 32rpx;
		font-family: Alibaba;
		color: #FFFFFF;
	}
	.yaoqing_tc{
		width: 750rpx;
		height: 390rpx;
		background: #F4F4F4;
		display: flex;
		
	}.yaoqing_tc-item{
		width: 112rpx;
		height: 112rpx;
		
		display: block;
		margin: 0 auto;
	}
	.yaoqing_tc-item-view{
		margin-left: 54rpx;
		margin-top: 45rpx;
	}
	.yaoqing_tc-item-view-text{
		font-size: 26rpx;
		font-family: Alibaba PuHuiTi-Regular, Alibaba PuHuiTi;
		font-weight: 400;
		color: #000000;
		margin-top: 22rpx;
		text-align: center;
	}
</style>
